<template>
    <div class="userProfile">
        <loading :props="{type: 'page', show: loading}"> </loading>
        <publicDialog :props="dialogData"></publicDialog>
        <div v-if="getUserInfoOk" class="userProfile_head" :class='headStateClass' v-show='headShow'>
            <span class="back" @click="goBack"></span>
            <span class="center">
                <!-- <span>{{ getUserName }}</span> -->
            </span>
            <!-- <span @click="headMore = !headMore" class="headSwitchAlbum" v-if="0">
                <transition name="fade">
                    <ul v-show="headMore">
                        <li @click.stop="switchAlbum('public')" :class="photoAlbum == 'public' && 'selected main_color'">{{language.userProfile_publicPhoto}}</li>
                        <li @click.stop="switchAlbum('private')" :class="photoAlbum == 'private' && 'selected main_color'">{{language.userProfile_privatePhoto}}</li>
                    </ul>
                </transition>
            </span> -->
        </div>
        <dialogSlider v-if='showDialogSlider' :propsDialogSlider.sync="showDialogSlider" :propsList.sync="dialogList" :propsIndex.sync="index"></dialogSlider>
        <template v-if="getUserInfoOk">
            <div class="interactive_box" v-if="!isUnavailable && !isHidden && !userObj.status.isBlocked">
                <button @click="sendWink" :class="{'selected' : userObj.status.isWinked}" class="btn_wink "><i class="userProfileOperationImg"></i></button>
                <button @click="sendFavorite" :class="{'selected' : userObj.status.isFavorite}" class="btn_favorite "><i class="userProfileOperationImg"></i></button>
                <button @click="gotoChat" class="btn_chat "><i class="userProfileOperationImg"></i></button>
            </div>
        </template>
        <div class="body" ref='divScrollListen'>
            <template v-if="getUserInfoOk">
                <div class="block_tips" v-if="!isUnavailable && userObj.status.isBlocked">
                    {{language.userProfile_youBlocked}} {{getUserName}}. <span class="unblock" @click="blockUser">{{language.userProfile_unblockNow}}</span>
                </div>
                <!--  userProfile err   -->
                <div class="profile_err_wrappe" v-if="isHidden || isUnavailable">
                    <template v-if="isHidden">
                        <h6>{{language.userProfile_pHideTitle}}</h6>
                        <p>{{language.userProfile_pHideContent}}</p>
                    </template>
                    <template v-if="isUnavailable">
                        <h6 v-html="language.userProfile_pNotTitle"></h6>
                    </template>
                    <button class="btn main_bg search" @click="gotoBrowse">{{language.userProfile_goBrowse}}</button>
                </div>
                <!--  end userProfile err  -->
                <template v-else>
                    <div class="photo_box">
                        <swiper :options="swiperOption" ref="mySwiper">
                            <swiper-slide v-for="(item, index) in userObj.pictures" :key="item.item_id">
                                <dd @click="openDialogSlider(index)">
                                    <!-- <img :src="item.icon" @click="openDialogSlider(index)" /> -->
                                    <lazyImg :src="item.icon" :replace="item.picture"></lazyImg>
                                </dd>
                            </swiper-slide>
                            <swiper-slide v-if="userObj.pictures.length == 0">
                                <div class="noPhoto" @click="openDialogSlider(0)" :style="{backgroundImage:'url('+getAvatar(userObj.account.gender)+')'}">
                                    <div class="ask_photo">
                                        <span class="sent" v-if="userObj.status.requested_photo && !userObj.status.photo_hidden_reason"> {{language.userProfile_requestSent}}</span>
                                        <span class="main_color" @click="requestPhoto" v-else> {{noDataSlierText}}</span>
                                    </div>
                                </div>
                            </swiper-slide>
                            <swiper-slide v-for="(item, index) in userObj.private_pictures" :key="item.item_id">
                                <dd @click="openDialogSlider(index)">
                                    <!-- <img :src="item.icon" @click="openDialogSlider(index)" /> -->
                                    <lazyImg :src="item.icon" :replace="item.picture"></lazyImg>
                                </dd>
                            </swiper-slide>
                            <swiper-slide v-if="userObj.private_pic_num > 0 && !userObj.status.has_access_of_private_album">
                                <div class="filter" @click="openDialogSlider(0)">
                                    <div class="filterBg" :style="filterBgStyle"></div>
                                    <div class="content_center">
                                        <div v-if="userObj.status.requsted_private_album">
                                            <p>{{language.userProfile_requestdPhotoTps}}</p>
                                            <button type="button" class="requested">{{language.userProfile_requestdPhotoBtnText}}</button>
                                        </div>
                                        <div v-else>
                                            <p>{{language.userProfile_requestPhotoTps}}</p>
                                            <button type="button" class="btn" @click="requestPrivate">{{language.userProfile_requestPhotoBtnText}}</button>
                                        </div>
                                    </div>
                                </div>
                            </swiper-slide>
                            <div class="swiper-pagination" slot="pagination" v-show="0"></div>
                        </swiper>
                    </div>
                    <div class="userInfo_box">
                        <h1>
                            {{userObj.account.username}}<i class="icon_gold" v-if="!(userObj.status.isGuest)"></i>
                            <span v-if="!isMySelf" @click="showBottomList" class="info_more_btn"><i></i><i></i><i></i></span>
                        </h1>
                        <p>{{ getBaseInfo }}</p>
                    </div>
                    <!-- Details -->
                    <div v-if="detailData.livingWith.length > 0 || detailData.appearance.length > 0 || detailData.background.length > 0 || detailData.lifestyle.length > 0" class="listInfo_details_box">
                        <div class="title">{{language.unify_details}}</div>
                        <div class="content">
                            <div v-if="detailData.livingWith.length > 0" class="content_line profileDetailIco1">
                                {{ detailData.livingWith }}
                            </div>
                            <div v-if="detailData.appearance.length > 0" class="content_line profileDetailIco2">
                                {{ detailData.appearance }}
                            </div>
                            <div v-if="detailData.background.length > 0" class="content_line profileDetailIco3">
                                {{ detailData.background }}
                            </div>
                            <div v-if="detailData.lifestyle.length > 0" class="content_line profileDetailIco4">
                                {{ detailData.lifestyle }}
                            </div>
                        </div>
                    </div>
                    <!-- end Details -->
                    <div class="listInfo_box" v-if="userObj.about.headline">
                        <div class="title">{{language.unify_headline}}</div>
                        <div class="content">{{userObj.about.headline}}</div>
                    </div>
                    <div class="listInfo_box" v-if="userObj.about.about_me">
                        <div class="title">{{language.unify_aboutMe}}</div>
                        <div class="content">{{userObj.about.about_me}}</div>
                    </div>
                    <div class="listInfo_box" v-if="userObj.about.about_my_match">
                        <div class="title">{{language.unify_aboutMyMatch}}</div>
                        <div class="content">{{userObj.about.about_my_match}}</div>
                    </div>
                    <div class="listInfo_box" v-if="userObj.about.firstidea">
                        <div class="title">{{language.unify_firstidea}}</div>
                        <div class="content">{{userObj.about.firstidea}}</div>
                    </div>
                    <div class="listInfo_box" v-if="getRelationshipStatus">
                        <div class="title">{{language.unify_relationshipStatus}}</div>
                        <div class="content">{{getRelationshipStatus}}</div>
                    </div>
                    <!-- <div class="listInfo_box">
                        <div class="title">{{language.unify_netWorth}}</div>
                        <div class="content">{{this.permissionPartMixin_SelectValue('ms_net_worth', this.userObj.detail.worth.net_worth)}}</div>
                    </div>
                    <div class="listInfo_box">
                        <div class="title">{{language.unify_eyes}}</div>
                        <div class="content">{{this.permissionPartMixin_SelectValue('ms_eyes', this.userObj.detail.basics.eyes)}}</div>
                    </div> -->
                    <div class="listInfo_box" v-if="getLookingFor">
                        <div class="title">{{language.unify_lookingFor}}</div>
                        <div class="content">{{getLookingFor}}</div>
                    </div>
                </template>
            </template>
        </div>
    </div>
</template>
<script>
import * as API from '../api';
import globalMixin from '../common/globalMixin'
import permissionPartMixin from '../common/permissionPartMixin'
import filterDataPartMixin from '../common/filterDataPartMixin'
import storeDataPartMixin from '../common/storeDataPartMixin'
import sliderPartMixin from '../common/sliderPartMixin'
import userProfilePartMixin from '../common/userProfilePartMixin'
import dialogSlider from './DialogSlider'
import loading from './Loading'
import publicDialog from './PublicDialog'
import lazyImg from './LazyImg'
import {
    swiper,
    swiperSlide
} from 'vue-awesome-swiper'
export default {
    name: 'userProfile',

    mixins: [permissionPartMixin, filterDataPartMixin, storeDataPartMixin, sliderPartMixin, userProfilePartMixin, globalMixin],

    components: {
        swiper,
        swiperSlide,
        dialogSlider,
        loading,
        publicDialog,
        lazyImg
    },

    data() {
        return {
            headShow: true,
            headStateClass: '',
            index: 0,
            loading: true,
            headMore: false,
            photoAlbum: 'public',
            userObj: {},
            dialogData: {},
            swiperOption: {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                // direction: 'vertical',
                onSlideChangeEnd: swiper => {
                    this.index = swiper.realIndex;
                }
            },
            showDialogSlider: false,
            isUnavailable: false,
            isHidden: false,
            userName: '',
            userId: '',
        }
    },

    created() {
        this.defaultData = _.clone(this.$data);
    },

    activated() {
        //console.log('UserProfile.vue test!!!')
        Object.assign(this.$data, this.defaultData);
        this.userName = this.$route.query.userName;
        this.userId = this.$route.query.userId;
        this.getUserInfo();
        this.dialogData = {};
    },

    computed: {

        isMySelf() {
            if (parseInt(this.userId) == parseInt(this.$store.state.user.userInfo.account.usr_id)) {
                return true;
            } else {
                return false;
            }
        },

        getUserInfoOk() {
            return _.isEmpty(this.userObj) ? false : true;
        },

        getUserName() {
            return this.getUserInfoOk && !this.isUnavailable && !this.isHidden ? this.userObj.account.username : this.userName;
        },

        getBaseInfo() {
            let genderName = this.permissionPartMixin_SelectValue('ms_gender', this.userObj.account.gender),
                countryName = this.userObj.account.country_name;

            if (countryName == 'United States') {
                countryName = 'U.S';
            } else if (countryName == 'United Kingdom') {
                countryName = 'U.K';
            }

            return this.formatUserLocation({
                age: this.userObj.account.age,
                gender: genderName,
                city: this.userObj.account.city,
                state: this.userObj.account.state_name,
                country: countryName,
            });
        },

        getRelationshipStatus() {
            return this.permissionPartMixin_MultiSelectStr('ms_marital', this.userObj.about.relationship_status);
        },

        getLookingFor() {
            let matchGenderStr = this.permissionPartMixin_MultiSelectStr('ms_gender', this.userObj.match.match_gender),
                lookingForStr = this.permissionPartMixin_MultiSelectStr('ms_relation', this.userObj.about.looking_for);
            return matchGenderStr + ', ages ' + this.userObj.match.match_age_min + ' - ' + this.userObj.match.match_age_max + ', ' + lookingForStr;
        },

        getDetailData() {
            let userData = this.userObj,
                detailData = {
                    livingWith: '',
                    appearance: '',
                    background: '',
                    lifestyle: '',
                };

            //appearance star
            detailData.appearance += this.userProfilePartMixin_height(userData);
            detailData.appearance += this.userProfilePartMixin_bodyType(userData);
            detailData.appearance += this.userProfilePartMixin_eyesColor(userData);
            detailData.appearance += this.userProfilePartMixin_hairColor(userData);
            //appearance end

            //background star
            detailData.background += this.userProfilePartMixin_ethnicity(userData);
            detailData.background += this.userProfilePartMixin_religion(userData);
            detailData.background += this.userProfilePartMixin_education(userData);
            detailData.background += this.userProfilePartMixin_language(userData);
            detailData.background += this.userProfilePartMixin_political(userData);
            //appearance end

            //lifestyle  star
            detailData.lifestyle += this.userProfilePartMixin_occupation(userData);
            detailData.lifestyle += this.userProfilePartMixin_income(userData);
            detailData.lifestyle += this.userProfilePartMixin_drinking(userData);
            detailData.lifestyle += this.userProfilePartMixin_smoking(userData);
            detailData.lifestyle += this.userProfilePartMixin_haveChildren(userData);
            detailData.lifestyle += this.userProfilePartMixin_wantChildren(userData);
            detailData.lifestyle += this.userProfilePartMixin_havePets(userData);
            //lifestyle end

            return detailData;
        },

        detailData() {

            let detailData = this.getDetailData;

            if (detailData.appearance.length > 3) {
                detailData.appearance = detailData.appearance.substring(0, detailData.appearance.length - 2);
            }

            if (detailData.background.length > 3) {
                detailData.background = detailData.background.substring(0, detailData.background.length - 2);
            }

            if (detailData.lifestyle.length > 3) {
                detailData.lifestyle = detailData.lifestyle.substring(0, detailData.lifestyle.length - 2);
            }

            return detailData;
        },

        dialogList() {
            let list = [],
                tthis = this,
                publicPhotos = this.userObj.pictures,
                privatePhotos = this.userObj.private_pictures;
            for (let i in publicPhotos) {
                list.push({
                    mssrc: publicPhotos[i].icon,
                    src: publicPhotos[i].picture,
                    pid: publicPhotos[i].item_id,
                    title: publicPhotos[i].desc,
                    w: publicPhotos[i].ix,
                    h: publicPhotos[i].iy,
                    data: {
                        prof_id: this.userObj.account.usr_id,
                        prof_name: this.userObj.account.username
                    },
                });
            }
            if (list.length == 0) {
                list.push({
                    html: tthis.sliderPartMixin_askPhoto(this.userObj),
                    clickCallback: (e) => {
                        tthis.requestPhoto(e);
                    }
                })
            }

            for (let i in privatePhotos) {
                list.push({
                    mssrc: privatePhotos[i].icon,
                    src: privatePhotos[i].picture,
                    pid: privatePhotos[i].item_id,
                    title: privatePhotos[i].desc,
                    w: privatePhotos[i].ix,
                    h: privatePhotos[i].iy,
                    data: {
                        prof_id: this.userObj.account.usr_id,
                        prof_name: this.userObj.account.username
                    },
                });
            }

            if (privatePhotos.length == 0 && !this.userObj.status.has_access_of_private_album && this.userObj.private_pic_num) {
                list.push({
                    html: tthis.sliderPartMixin_privatePhotosPermission(this.userObj, this.filterBgStyle),
                    clickCallback: (e) => {
                        tthis.requestPrivate(e);
                    }
                });
            }

            /*list.push({
                html: tthis.sliderPartMixin_photos(),
                clickCallback: function() {
                    tthis.gotoChat();
                }
            });*/

            return list;
        },

        blockStr() {
            return this.userObj.status.isBlocked == 1 ? this.language.userProfile_unBlockUser : this.language.userProfile_blockUser;
        },

        hiddenStr() {
            return this.userObj.status.has_remove_profile == 1 ? this.language.userProfile_displaySearch : this.language.userProfile_hideSearch;
        },

        showAlbumButton() {
            return this.getUserInfoOk && !this.isHidden && this.userObj.private_pic_num > 0
        },

        filterBgStyle() {
            let src = this.userObj.pictures.length ? this.userObj.pictures[this.userObj.pictures.length - 1].icon : '';
            return 'background-image:url(' + src + ')';
        },

        noDataSlierText() {
            let text = this.language.userProfile_askPhoto;
            if (this.userObj.status.photo_hidden_reason) {
                text = this.language.userProfile_photoPrivacyTips[this.userObj.status.photo_hidden_reason];
            }
            return text;
        },
    },

    watch: {
        index: function(newVal, oldVal) {
            this.$refs.mySwiper.swiper.slideTo(newVal, 1000, false);
            /* if ((this.userObj.pictures.length == 0 && newVal > 0) || (this.userObj.pictures.length && newVal > this.userObj.pictures.length - 1)) {
                 this.photoAlbum = 'private';
             } else {
                 this.photoAlbum = 'public';
             }*/
        }
    },

    methods: {

        onDivUpScroll(e) {
            let scrollTop = e.target.scrollTop;
            this.headShow = scrollTop < 370;
        },

        onDivDownScroll(e) {
            let scrollTop = e.target.scrollTop;
            this.headShow = true;
            this.headStateClass = scrollTop > 370 ? 'exceedMinValClass' : '';
        },

        switchAlbum(album) {
            this.headMore = false;
            this.photoAlbum = album;
            this.index = 0;
            /*if (album == 'public') {
                this.index = 0;
            } else {
                this.index = this.userObj.pictures.length || 1;
            }*/
        },

        showBottomList() {
            var tthis = this;
            this.dialogData = {
                position: 'bottom',
                content: {
                    btn: [{
                        label: this.language.unify_report,
                        btnCallback: function() {
                            tthis.$router.push({
                                name: 'reportUser',
                                query: {
                                    userName: tthis.getUserName,
                                    userId: tthis.userId
                                }
                            });
                        }
                    }, {
                        label: this.blockStr,
                        btnCallback: function() {
                            if (tthis.userObj.status.isBlocked == 1) {
                                tthis.blockUser();
                            } else {
                                setTimeout(function() {
                                    tthis.dialogData = {
                                        position: 'middle',
                                        type: 'confirm',
                                        content: {
                                            info: tthis.language.userProfile_areBlockUser
                                        },
                                        callback: function() {
                                            tthis.blockUser();
                                        }
                                    }
                                }, 50);
                            }
                        }
                    }]
                }
            };
        },

        getUserInfo() {
            let tthis = this,
                userStructData = this.getUserObj(this.userId);
            console.log(userStructData)
            if (!_.isEmpty(userStructData) && userStructData['user']) {
                tthis.userObj = userStructData['userInfo'];
                tthis.loading = false;
            } else {
                tthis.userObj = {};
                API.user_profile({
                    data: {
                        username: this.userName,
                        prof_id: this.userId
                    },
                    success: function(result) {
                        if (result.errcode) {
                            if (result.errcode == 121) {
                                tthis.userObj = { status: result.status }
                                tthis.isHidden = true;
                            } else if (result.errcode == 125) {
                                tthis.isUnavailable = true;
                            }
                        } else {
                            tthis.userObj = tthis.filterDataPartMixin_ReplacePrivatePhotos(result);
                            tthis.saveUserObj();
                        }
                    },
                    complete: function() {
                        tthis.loading = false;
                    }
                })
            }
        },

        sendWink() {
            let myUserInfo = Unit.getObjSessionStorage('ms_myself'),
                tthis = this;
            if (this.userObj.status.isWinked) {
                this.changeTopTips({
                    text: this.language.userProfile_winkedErr
                });
                return;
            }
            if (parseInt(myUserInfo.not_accepting_flirting) > 0) {
                this.changeTopTips({
                    text: this.language.userProfile_blockWinkText
                });
                return;
            }
            if (myUserInfo.account.hidden == 1) {
                tthis.dialogData = {
                    position: 'middle',
                    content: {
                        title: tthis.language.userProfile_hiddenProfileTip,
                        info: tthis.language.userProfile_hiddenProfileText,
                        btn: [{
                            label: tthis.language.userProfile_OpenProfile,
                            btnCallback: function() {
                                tthis.loading = true;
                                let obj = {};
                                obj.data = {
                                    hide: 0
                                };
                                obj.callback = function() {
                                    tthis.sendWink()
                                };
                                obj.complete = function() {
                                    tthis.loading = false;
                                };
                                tthis.$store.dispatch('user_updateProfileStatus', obj);
                            }
                        }]
                    },
                };
                return;
            }
            // tthis.loading = true;
            API.send_wink({
                data: {
                    prof_id: this.userObj.account.usr_id
                },
                success: function(result) {
                    if (result.results == 1) {
                        tthis.userObj.status.isWinked = 1;
                        tthis.saveUserObj();
                        tthis.changeTopTips({
                            type: 'successful',
                            text: tthis.language.userProfile_winkSent
                        });
                    } else if (result.errcode) {
                        tthis.changeTopTips({
                            text: result.errmsg
                        });
                    }
                },
                complete: function() {
                    // tthis.loading = false;
                }
            })
        },

        sendFavorite() {
            let tthis = this;
            // tthis.loading = true;
            if (tthis.userObj.status.isFavorite) {
                API.remove_favor({
                    data: {
                        prof_id: this.userObj.account.usr_id
                    },
                    success: function(result) {
                        if (result.result == 1) {
                            tthis.changeTopTips({
                                type: 'successful',
                                text: tthis.language.userProfile_unfavorited
                            });
                            tthis.userObj.status.isFavorite = 0;
                            tthis.saveUserObj();
                        } else {
                            tthis.changeTopTips({
                                text: result.errmsg
                            });
                        }
                    },
                    complete: function() {
                        // tthis.loading = false;
                    }
                })
            } else {
                API.add_favor({
                    data: {
                        prof_id: this.userObj.account.usr_id
                    },
                    success: function(result) {
                        if (result.result == 1) {
                            tthis.userObj.status.isFavorite = 1;
                            tthis.saveUserObj();
                            tthis.dialogData = {
                                position: 'middle',
                                content: {
                                    title: '',
                                    info: tthis.repalceStr(tthis.language.userProfile_youLikeText, [tthis.userObj.account.username]),
                                    btn: [{
                                        label: tthis.language.userProfile_sendMessage,
                                        btnCallback: function() {
                                            tthis.gotoChat();
                                        }
                                    }]
                                },
                            };
                        } else {
                            tthis.changeTopTips({
                                text: result.errmsg
                            });
                        }
                    },
                    complete: function() {
                        // tthis.loading = false;
                    }
                })
            }

        },

        saveUserObj() {
            let userStructData = this.getUserObj(this.userObj.account.usr_id);
            if (_.isEmpty(userStructData)) {
                userStructData['im'] = false;
                userStructData['userInfo'] = this.userObj;
            } else {
                Object.assign(userStructData['userInfo'], this.userObj)
            }
            userStructData['user'] = true;
            this.setUsersObj(this.userObj.account.usr_id, userStructData)
        },

        changeTopTips(obj) {
            this.dialogData = {
                top: 0,
                position: 'top',
                type: typeof(obj.type) == 'undefined' ? 'error' : obj.type,
                content: {
                    info: obj.text,
                },
            };
        },

        goBack() {
            this.$router.go(-1);
        },

        gotoBrowse() {
            this.$router.push({
                name: 'browse'
            });
        },

        gotoChat() {
            this.$router.push({
                name: 'message',
                query: {
                    userName: this.getUserName,
                    userId: this.userId
                }
            });
        },

        requestPhoto(e) {
            e.stopPropagation();
            let tthis = this;
            if (tthis.userObj.status.requested_photo == 1 || tthis.userObj.status.photo_hidden_reason) {
                return;
            }
            tthis.loading = true;
            API.request_photo({
                data: {
                    about_id: tthis.userObj.account.usr_id
                },
                success: function(result) {
                    if (result.res == 1) {
                        tthis.userObj.status.requested_photo = 1;
                        tthis.saveUserObj();
                    } else {
                        tthis.changeTopTips({
                            text: result.errmsg
                        });
                    }
                },
                complete: function() {
                    tthis.loading = false;
                }

            })
        },

        openDialogSlider(index) {
            let tthis = this;
            setTimeout(() => {
                //console.log(739, tthis.index)
                tthis.showDialogSlider = true;
            }, 200)
            // this.index = index;
        },

        hideUser() {
            let tthis = this,
                data = {
                    prof_id: this.userObj.account.usr_id
                },
                action = this.userObj.status.has_remove_profile == 1 ? 'unremove' : 'mark_hidden';
            data.action_type = action;
            tthis.loading = true;
            API.hidden_from_search({
                data: data,
                success: function(result) {
                    if (result.res == 1) {
                        if (action == 'unremove') {
                            tthis.changeTopTips({
                                type: 'successful',
                                text: tthis.language.userProfile_displayUserOK
                            });
                            tthis.userObj.status.has_remove_profile = 0;
                        } else {
                            tthis.changeTopTips({
                                type: 'successful',
                                text: tthis.language.userProfile_hiddenUserOK
                            });
                            tthis.userObj.status.has_remove_profile = 1;
                        }

                        tthis.saveUserObj();
                    }
                },
                complete: function() {
                    tthis.loading = false;
                }
            })
        },

        blockUser() {
            let tthis = this,
                data = {
                    prof_id: this.userObj.account.usr_id,
                },
                action = this.userObj.status.isBlocked == 1 ? 'un_block' : 'block';
            data.action = action;
            tthis.loading = true;
            API.block({
                data: data,
                success: function(result) {
                    if (result.results == 1) {
                        if (action == 'un_block') {
                            tthis.changeTopTips({
                                type: 'successful',
                                text: tthis.language.userProfile_unBlockSuccessTips
                            });
                            tthis.userObj.status.isBlocked = 0;

                        } else {
                            tthis.userObj.status.isBlocked = 1;
                            tthis.userObj.status.isFavorite = 0;
                            tthis.userObj.status.user_has_access_of_my_private_album = 0;
                        }
                        tthis.loading = false;
                        tthis.saveUserObj();
                    }
                },
                complete: function() {
                    tthis.loading = false;
                }
            })
        },

        requestPrivate(e) {
            e.stopPropagation();
            let myUserInfo = Unit.getObjSessionStorage('ms_myself'),
                tthis = this;
            if (myUserInfo.account.hidden == 1) {
                tthis.dialogData = {
                    position: 'middle',
                    content: {
                        title: tthis.language.userProfile_hiddenProfileTip,
                        info: tthis.language.userProfile_hiddenProfileText,
                        btn: [{
                            label: tthis.language.userProfile_OpenProfile,
                            btnCallback: function() {
                                tthis.loading = true;
                                let obj = {};
                                obj.data = {
                                    hide: 0
                                };
                                obj.callback = function() {
                                    tthis.requestPrivate(e)
                                };
                                obj.complete = function() {
                                    tthis.loading = false;
                                };
                                tthis.$store.dispatch('user_updateProfileStatus', obj);
                            }
                        }]
                    },
                };
                return;
            }

            tthis.loading = true;
            API.request_private_album({
                data: {
                    prof_id: this.userObj.account.usr_id
                },
                success: function(result) {
                    if (result.results == 1) {
                        tthis.userObj.status.requsted_private_album = 1;
                        tthis.saveUserObj();
                    } else if (result.errcode) {
                        tthis.changeTopTips({
                            text: result.errmsg
                        });
                    }
                },
                complete: function() {
                    tthis.loading = false;
                }
            })
        }
    }
}

</script>
<style scoped>
.userProfile .userProfile_head {
    z-index: 9;
    position: absolute;
    left: 0;
    top: 0;
    height: 60px;
}

.userProfile .userProfile_head .back {
    margin-left: 8px;
    margin-top: 6px;
    width: 50px;
    height: 50px;
    display: inline-block;
    background: url(../assets/icon_back.png) no-repeat 8px 8px;
    background-size: 32px;
}

.userProfile .userProfile_head.exceedMinValClass .back {
    background-position: 8px -56px;
}

.userProfile .body {
    padding-bottom: 90px;
}

.listInfo_box,
.listInfo_details_box {
    color: #1e1e1e;
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 22px;
    font-size: 16px;
    background-color: #fff;
}

.listInfo_details_box {
    padding-bottom: 10px;
}

.listInfo_box .title,
.listInfo_details_box .title {
    font-size: 17px;
    padding: 18px 0 12px;
    border-top: 1px #e7e7e7 solid;
}

.listInfo_box .content,
.listInfo_details_box .content {
    font-size: 15px;
}

.listInfo_details_box .content_line {
    overflow: hidden;
    padding-top: 0px;
    margin-top: 2px;
    font-size: 15px;
    padding-top: 0;
    padding-left: 34px;
    padding-bottom: 20px;
    color: #1e1e1e;
    background-repeat: no-repeat;
    background-position: left 2px;
    background-size: 21px auto;
}

.listInfo_box .listInfo_li {
    margin-bottom: 20px;
}

.listInfo_box .listInfo_li:last-child {
    margin-bottom: 0;
}

.listInfo_box label {
    font-size: 18px;
}

.userInfo_box {
    background: #fff;
    padding: 22px 18px;
    font-size: 15px;
}

.userInfo_box h1 {
    position: relative;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: normal;
}

.userInfo_box h1 .icon_gold {
    margin-left: 5px;
    margin-top: 4px;
    vertical-align: top;
}

.userProfile .info_more_btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    padding: 10px 5px;
}

.userProfile .info_more_btn i {
    float: right;
    width: 5px;
    height: 5px;
    background: #ccc;
    margin: 0 3px;
    border-radius: 50%;
}

.userProfile .userInfo_box p {
    color: #666;
}

.interactive_box {
    position: absolute;
    z-index: 9;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    height: 62px;
    text-align: center;
    overflow: hidden;
    background-image: -moz-linear-gradient(top, rgba(245, 245, 245, 0.0) 0%, rgba(245, 245, 245, 0.5) 50%, rgba(245, 245, 245, 1.0) 100%);
    background-image: -webkit-linear-gradient(top, rgba(245, 245, 245, 0.0) 0%, rgba(245, 245, 245, 0.5) 50%, rgba(245, 245, 245, 1.0) 100%);
}

.interactive_box button {
    margin: 0 10px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-block;
    background-color: #fff;
    box-shadow: 0px 1px 5px #ccc;
}

.interactive_box button i {
    width: 32px;
    height: 32px;
    background-size: 100px;
    display: inline-block;
    vertical-align: middle;
}

.interactive_box .btn_wink.selected i {
    background-position: -46px -9px;
}

.interactive_box .btn_favorite i {
    background-position: 2px -58px;
}

.interactive_box .btn_favorite.selected i {
    background-position: -46px -58px;
}

.interactive_box .btn_chat {}

.interactive_box .btn_chat i {
    background-position: 2px -109px;
}

.profile_err_wrappe {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding: 0 20px;
    font-size: 15px;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    box-sizing: border-box;
}

.profile_err_wrappe h6 {
    font-weight: normal;
    font-size: inherit;
    margin-bottom: 16px;
}

.profile_err_wrappe p {
    color: #999;
    margin-bottom: 20px;
}

.profile_err_wrappe button {
    width: 80%;
    color: #fff;
    margin-top: 22px;
    font-size: 14px;
}

.userProfile .headSwitchAlbum {
    position: absolute;
    width: 50px;
    height: 44px;
    top: 0;
    right: 0;
    background: url(../assets/icon_switch.png) no-repeat center;
    background-size: 26px;
}

.userProfile .headSwitchAlbum li.selected {
    background: url(../assets/ico_selectedA.png) no-repeat center right;
    background-size: 17px;
}

.userProfile .headSwitchAlbum ul {
    position: absolute;
    left: -108px;
    top: 50px;
    padding: 3px 10px;
    font-size: 14px;
    line-height: 38px;
    min-width: 136px;
    text-align: left;
    text-indent: 3px;
    border-radius: 5px;
    color: #6a6a6a;
    background-color: #fff;
    box-shadow: 1px 1px 4px #eaeaea;
}

.userProfile .headSwitchAlbum li:first-child {
    border-bottom: 1px solid #e6e6e6;
}

.userProfile .block_tips {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: #ff634a;
    overflow: hidden;
}

.userProfile .block_tips .unblock {
    text-decoration: underline;
}

.userProfile .head_more {
    box-shadow: 0 3px 10px #ccc;
}

.userProfile .head_more li {
    width: 100%;
    background: #fff;
    font-size: 15px;
    height: 46px;
    color: #999;
    line-height: 46px;
    border-bottom: 1px solid #ccc;
}

.userProfile .head_more li:last-child {
    border-bottom: none;
}

.userProfile .photo_box {
    position: relative;
    height: 370px;
    overflow: hidden;
}

.userProfile .photo_box dd {
    width: 100%;
    height: 370px;
    background-position: 0 0;
    /*
    background-repeat: no-repeat;
    background-size: cover;
    */
    background: #d3d3d3 url(../assets/max_loading.gif) center no-repeat;
    background-size: 30px 30px;
}

.userProfile .photo_box .noPhoto {
    position: relative;
    width: 100%;
    height: 370px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}



.userProfile .photo_box .filter {
    height: 370px;
}

.userProfile .photo_box .filter::after {
    display: inline-block;
    width: 0;
    height: 100%;
    content: '';
    vertical-align: middle;
}

.userProfile .photo_box .filter .filterBg {
    position: absolute;
    /*z-index: 1;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-filter: blur(18px);
    -moz-filter: blur(18px);
    -ms-filter: blur(18px);
    filter: blur(18px);
    filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=18, MakeShadow=false);
    opacity: .2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.userProfile .photo_box .filter .content_center {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    color: #333;
    line-height: 30px;
}

.userProfile .photo_box .filter .content_center .cl5 {
    color: #555;
}

.userProfile .photo_box .filter .content_center button {
    width: auto;
    line-height: 38px;
    height: 40px;
    margin-top: 6px;
}

.userProfile .photo_box .filter .content_center .requested {
    padding: 0 45px;
    background: #ccc;
    color: #fff;
}

.userProfile .photo_box .ask_photo {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 370px;
}

.userProfile .photo_box .ask_photo span {
    padding: 10px;
}

.userProfile .photo_box .ask_photo .sent {
    color: #909090;
}

.userProfile .photo_box .icon_gold {
    height: 19px;
    margin-right: 7px;
}

.userProfile .photo_box img {
    width: 100%;
    max-height: 370px;
}

.userProfile .listInfo_box p {
    word-wrap: break-word;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .4s
}

.fade-enter,
.fade-leave-active {
    opacity: 0
}

</style>
